var vm = new Vue({
    el: '#app',
    data: {
        host: host,
        username: '',
        password: '',
        password2: '',
        mobile: '',
        image_code: '',
        image_code_url: '',
        sms_code: '',
        uuid: '',
        allow: false,
        second: 0,
        error_name: false,
        error_pwd: false,
        error_pwd2: false,
        error_phone: false,
        error_image_code: false,
        error_sms_code: false,
        error_allow: false,
        name_tip: false,
        pwd_tip: false,
        pwd2_tip: false,
        phone_tip: false,
        image_code_tip: false,
        sms_code_tip: false,
        allow_tip: false,
        error_name_message: '',
        error_phone_message: '',
        error_image_code_message: '图片验证码错误',
        error_sms_code_message: '短信验证码错误',
        sms_code_button: '点击获取验证码',
        status_name: '',
        status_pwd: '',
        status_phone: '',
        status_sms: '',
    },
    mounted(){
        this.generate_image_code()
    },
    methods: {
        check_username: function(){
            var url = host + '/username/' + this.username + '/count'
            var usernameReg = /^[a-zA-Z0-9_-]{3,20}$/
            if(!usernameReg.test(this.username)){
                this.error_name_message = '用户名不合法'
                this.status_name = 'color: red'
                this.name_tip = true
                this.error_name = true
            }else{
                this.error_name = false
                axios.get(url, {
                    responseType: 'json',
                }).then(function(response){
                    if (response.data.code == 200){
                        vm.error_name_message= response.data.errmsg
                        vm.status_name = 'color: green'
                        vm.error_name = false
                    }else{
                        vm.error_name_message= response.data.errmsg
                        vm.status_name = 'color: red'
                        vm.error_name = true
                    }
                    vm.name_tip = true
                })
            }  
        },
        check_phone_reg: function(){
            var phoneReg = /^1[3578][0-9]{9}$/
            if(phoneReg.test(this.mobile)){
                return true
            }else{
                return false
            }
        },
        check_phone: function(){
            var url = host + '/mobile/' + this.mobile + '/count'
            if(!this.check_phone_reg()){
                this.error_phone_message = '手机号格式不正确'
                this.status_phone = 'color: red'
                this.phone_tip = true
                this.error_phone = true
            }else{
                this.sms_code_tip = false
                this.error_phone = false
                axios.get(url, {
                    responseType: 'json',
                }).then(function(response){
                    if (response.data.code == 200){
                        vm.error_phone_message= response.data.errmsg
                        vm.status_phone = 'color: green'
                        vm.phone_tip = true
                    }else{
                        vm.error_phone_message= response.data.errmsg
                        vm.status_phone = 'color: red'
                        vm.phone_tip = true
                        vm.error_phone = true
                    }
                })
            }  
        },
        check_pwd: function(){
            var psdReg = /^[a-zA-Z0-9-_.]{8,20}$/
            if(!psdReg.test(this.password)){
                this.error_password_message = '密码格式不对'
                this.pwd_tip = true
                this.error_pwd = true
            }else{
                this.pwd_tip = false
                this.error_pwd = false
            }  
        },
        check_pwd2: function(){
            if(this.password != this.password2){
                this.pwd2_tip = true
                this.error_pwd2 = true
            }else{
                this.pwd2_tip = false
                this.error_pwd2 = false
            }  
        },
        check_image_code: function(){
            var url = this.host + '/check_image_code/' + this.image_code + '/uuid/' + this.uuid
            console.log(url)
            axios.get(url, {
                responseType: 'json',
            }).then(function(response){
                if(response.data.code == 200){
                    vm.image_code_tip = false
                }else{
                    vm.error_image_code_message = response.data.errmsg
                    vm.image_code_tip = true
                }
            })
        },
        check_sms_code: function(){
            if(!this.check_phone_reg() | this.error_phone){
                this.error_sms_code_message = '请输入正确的手机号'
                this.sms_code_tip = true
                this.error_sms_code = false
                return this.prevent = false
            }else{
                var url = this.host + '/check_sms_code/' + this.sms_code + '/mobile/' + this.mobile
                console.log(url)
                axios.get(url, {
                    responseType: 'json',
                }).then(function(response){
                    if(response.data.code == 200){
                        vm.sms_code_tip = false
                    }else{
                        vm.error_sms_code_message = response.data.errmsg
                        vm.sms_code_tip = true
                    }
                })
            }
        },
        check_allow: function(){
            console.log(this.allow)
            if(!this.allow){
                this.allow_tip = true
                this.error_allow = true
            }else{
                this.allow_tip = false
                this.error_allow = false
            }  
        },
        getUUID: function(){
            var uuid = new Date().getTime();
            return uuid
        },
        generate_image_code: function(){
            this.uuid = this.getUUID()
            var url = this.host + '/image_code/' + this.uuid
            console.log(url)
            this.image_code_url = url
        },
        send_sms_code: function(){
            if(!this.check_phone_reg() | this.error_phone){
                this.error_sms_code_message = '请输入正确的手机号'
                this.sms_code_tip = true
                this.error_sms_code = false
                return this.prevent = false
            }else{
                this.sms_code_tip = false
                var url = this.host + '/sms_code/' + this.mobile + '/image_code/' + this.uuid
                console.log(url)
                axios.get(url,{
                    responseType: 'json',
                }).then(function(response){
                    alert(response.data.msg)
                })
                this.second = 3
                console.log(typeof this.second)
                var myInterval = setInterval(function(){
                    vm.status_sms = 'pointer-events:none; opacity: 0.6;'
                    if(vm.second==0){
                        vm.status_sms = ''
                        vm.sms_code_button = '点击获取验证码'
                        vm.generate_image_code()
                        clearInterval(myInterval)
                    }else{
                        vm.sms_code_button = vm.second + '秒后重新发送'
                        vm.second--
                    }
                },1000)
            } 
        },
        on_submit: function(){
            this.check_username()
            this.check_pwd()
            this.check_pwd2()
            this.check_phone()
            this.check_image_code()
            this.check_sms_code()
            this.check_allow()
            if(this.error_name||this.error_pwd||this.error_pwd2||this.error_phone||this.error_image_code||this.error_sms_code||this.error_allow){
                return this.prevent = false
            }
            console.log('提交事件')
            var url = this.host + '/register/'
            var data = {
                'username': this.username,
                'password': this.password,
                'password2': this.password2,
                'mobile': this.mobile,
                'allow': this.allow,
                'uuid': this.uuid,
            }
            axios.post(url, data, {
                responseType: 'json'
            }).then(function(response){
                alert(response.data.errmsg)
                window.location.href = '/index.html'
            })
        },
    },
    watch:{
        username(val, oldval){
            vm.check_username()
        }
    },
});
